<template>
    <div class="calendar_wrapper is-light-mode">
		<Qalendar 
			:events="events"
			:config="props.config || config"
		  />
	  </div>
</template>

<script setup>
import { Qalendar } from 'qalendar';

const props = defineProps({
	showMonthlyView: {
		type: Boolean,
	},
	events: {
		type: Array,
		required: true,
	},
	config: {
		type: Object,
	},
})

const config = {
  style: {
    fontFamily: 'inherit'
  },
  dayBoundaries: {
    start: 8,
    end: 22,
  },
}

if (props.showMonthlyView) {
  config.defaultMode = 'month'
  config.disableModes = ['day', 'week']
}
</script>

<style>
@import "qalendar/dist/style.css";
	
  .calendar_wrapper {
    width: 100%;
    height: 100%;
    padding: 20px;
  }
</style>